<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/jquery.fullPage.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/animate.css" />
	</head>

	<body>
		<div id="fullpage">
			<!--memu-->
			<ul id="menu">
				<li data-menuanchor="page1" class="active">
					<a href="#page1">home</a>
				</li>
				<li data-menuanchor="page2">
					<a href="#page2">about me</a>
				</li>
				<li data-menuanchor="page3">
					<a href="#page3">skills</a>
				</li>
				<li data-menuanchor="page4">
					<a href="#page4">projects</a>
				</li>
				<li data-menuanchor="page5">
					<a href="#page5">contact</a>
				</li>
			</ul>

			<!--第一屏  home 主页-->
			<div class="section section1">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="header">
								<img class="img-responsive" src="img/tiantiansifangmao-10.png" />
								<h1 class="text-center title1">Hello world</h1>
								<h2 class="text-center">Librae’s resume</h2>
								<div class="logo">
									<div class="img_wrap">
										<a href="https://github.com/Librae33"><img src="img/github.png"></a>
									</div>
									<div class="img_wrap">
										<a href="#"><img src="img/sina.png" /></a>
									</div>
									<div class="img_wrap">
										<a href="#"><img src="img/zhihu.png" /></a>
									</div>
									<div class="img_wrap">
										<a href="#"><img src="img/instagram.png" />
											<a href="#"></a>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>

			</div>
			<!--第二屏  about me 关于我-->
			<div class="section section2">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="description">
								<h1 class="title1 text-center">ABOUT ME</h1>
								<div class="des_item">
									<img src="img/tiantiansifangmao-17.png" />
									<h2 class="text-center text-info">涂珊珊</h2>
									<h4 class="text-center">一个非典型理工女</h4>
									<h4 class="text-center">爱前端</h4>
									<h4 class="text-center text-success">爱code</h4>
									<h4 class="text-center">爱艺术和一切美的事物<i class="icon"><img src="img/heart-1.png"></i></h4>
								</div>
								<div class="des_item">
									<img src="img/tiantiansifangmao-07.png" />
									<h4 class="text-center text-info">大四/辽宁沈阳</h4>
									<h4 class="text-center">信息管理与信息系统GPA:3.52/4</h4>
									<h4 class="text-center">学习前端已半年</h4>
									<h4 class="text-center text-success">正在努力学习angular，vue等框架</h4>
									<h4 class="text-center"><i class="icon"><img src="img/heart-15.png"></i></h4>
								</div>
								<div class="des_item">
									<img src="img/tiantiansifangmao-01.png" />
									<h4 class="text-center text-info">熟悉 HTML、CSS、Javascript，能熟练开发符合 W3C 标准的页面</h4>
									<h4 class="text-center">熟练使用 jQuery ，bootstrap等框架，熟悉ajax，json</h4>
									<h4 class="text-center">能够使用gulp进行压缩打包，和使用git命令行进行版本管理</h4>
									<h4 class="text-center text-success">有面向对象开发的经验<i class="icon"><img src="img/heart-6.png"></i></h4>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!--第三屏  skill 职业技能-->
			<div class="section section3">

				<div class="skill_wrap">
					<h1 class="text-center title1">skills</h1>
					<div class="first_group">
						<div class="tag familiar">HTML5</div>
						<div class="tag familiar">CSS3</div>
						<div class="tag familiar">JavaScript</div>
					</div>
					<div class="second_group">
						<div class="tag">DOM/BOM</div>
						<div class="tag">Jquery</div>
						<div class="tag">Bootstrap</div>
						<div class="tag familiar">AJAX</div>
					</div>
					<div class="third_group">
						<div class="tag">FireWorks</div>
						<div class="tag">gulp</div>
						<div class="tag familiar">Git</div>
						<div class="tag">WebApp</div>
					</div>
					<div class="fouth_group">
						<div class="tag">Java</div>
						<div class="tag familiar">SSH2</div>
						<div class="tag">MySQL</div>
					</div>

				</div>
			</div>
			<!--第四屏 project 个人项目-->
			<div class="section section4">
				<div class="project_slide">
					<div class="slide">

						<h5 class="text-center title1">
					<a href="https://github.com/Librae33/e-shop" title="在线演示"><img src="img/030.png" class="source"></a>
					<a href="https://github.com/Librae33/e-shop" title="源代码"><img src="img/031.png" class="source"></a>
					电子商务网站<img src="img/heart-12.png" class="icon"/></h5>
						<div class="item_left">
							<div class="project_img">
								<img src="img/001.jpg" />
							</div>
							<div class="project_img">
								<img src="img/002.jpg" />
							</div>
							<div class="project_img">
								<img src="img/003.jpg" />
							</div>
							<div class="project_img">
								<img src="img/005.jpg" />
							</div>

						</div>
						<div class="item_right">
							<h4 class="text-primary">包括 主页，产品分类页，和产品详情页，使用gulp进行打包压缩</h4>
							<p>✿ 根据PSD实现页面的静态布局，能最大程度上还原设计稿</p>
							<p>✿ 使用原生JS实现动态页面的开发</p>
							<p>✿ 使用面向对象方式封装了轮播组件，能够在不同页面实现复用， 使用ajax动态绑定数据，json格式转换，图片懒加载，仿tween.js封装的原生js动画， 能够实现图片的渐隐渐现式切换
							</p>
							<p>✿ 原生js实现的左侧楼层的滚动监听，商品列表的滑动门，商品的图片放大镜，选项卡切换，回到顶部等功能</p>
							<p>✿ 注册页面的表单验证</p>

						</div>
					</div>
					<div class="slide">

						<h5 class="text-center title1">
						<a href="https://github.com/Librae33/myBlog" title="在线预览"><img src="img/030.png" class="source"></a>
					<a href="https://github.com/Librae33/myBlog" title="源代码"><img src="img/031.png" class="source"></a>
					博客管理系统<img src="img/heart-10.png" class="icon"/></h5>
						<div class="item_left">
							<div class="project_img">
								<img src="img/019.jpg" />
							</div>
							<div class="project_img">
								<img src="img/020.jpg" />
							</div>
							<div class="project_img">
								<img src="img/021.jpg" />
							</div>
							<div class="project_img">
								<img src="img/022.jpg" />
							</div>
						</div>
						<div class="item_right">
							<h4 class="text-primary">包括 前台页面和后台管理系统</h4>
							<p>✿ 使用HTML,CSS,bootstrap构建静态页面</p>
							<p>✿ 使用java的SSH2框架，结合MySQL和tomacat搭建后台，以及前后台的交互</p>
							<p>✿ 实现了前台游客浏览文章，发表评论，给博主留言等功能</p>
							<p>✿ 后台实现的主要功能有使用ckeditor发表文章，查看留言和评论，上传图片等功能</p>

						</div>
					</div>
					<div class="slide">

						<h3 class="title1 text-center">
						<a href="http://github-26713243.oschina.io/librae33.github.io/myProject/musicPlayer/index.html" title="在线预览"><img src="img/030.png" class="source"></a>
					<a href="https://github.com/Librae33/musicPlayer" title="源代码"><img src="img/031.png" class="source"></a>
					仿豆瓣音乐播放器<img src="img/heart-10.png" class="icon"/></h3>
						<div class="item_left">
							<div class="project_img" style="height: 250px;width: 400px;">
								<img src="img/006.jpg" />
							</div>

						</div>
						<div class="item_right">
							<h4 class="text-primary">使用原生JS和HTML5实现</h4>
							<p>✿ 实现了音乐播放，时间和总时长的显示</p>
							<p>✿ 实现了音乐的下一首切换，音乐封面的暂停和旋转</p>
							<p>✿ 用户点击删除后自动切换到下一首，并把当前歌曲删除</p>
							<p>✿ 时间控制面板 和音量的调节</p>

						</div>

					</div>
					<div class="slide">

						<h3 class="title1 text-center">
						<a href="https://github.com/Librae33/demos" title="在线预览"><img src="img/030.png" class="source"></a>
					<a href="https://github.com/Librae33/demos" title="源代码"><img src="img/031.png" class="source"></a>一些单页demo<img src="img/heart-16.png" class="icon"/></h3>
						<div class="item_left">
							<div class="project_img">
								<img src="img/009.jpg" />
							</div>
							<div class="project_img">
								<img src="img/012.jpg" />
							</div>
							<div class="project_img">
								<img src="img/014.jpg" />
							</div>
							<div class="project_img">
								<img src="img/013.jpg" />
							</div>

						</div>
						<div class="item_right">
							<h4 class="text-primary">使用CSS3或原生JS或jQuery实现</h4>
							<p>✿ 轮播图组件(面向对象，图片懒加载，ajax加载数据)</p>
							<p>✿ 回到顶部,图片放大镜，瀑布流效果，CSS3动画，鼠标跟随</p>
							<p>✿ 纯CSS3实现的照片墙，图片zoom放大效果</p>
							<p>✿ TomCat动画，表格排序(动态加载数据)</p>

						</div>

					</div>
					<div class="slide">

						<h3 class="title1 text-center">
						<a href="https://github.com/Librae33/IFE-task" title="在线预览"><img src="img/030.png" class="source"></a>
					<a href="https://github.com/Librae33/IFE-task" title="源代码"><img src="img/031.png" class="source"></a>
					百度前端学院<img src="img/heart-1.png" class="icon"/></h3>
						<div class="item_left">
							<div class="project_img">
								<img src="img/004.jpg" />
							</div>
							<div class="project_img">
								<img src="img/006.jpg" />
							</div>
							<div class="project_img">
								<img src="img/008.jpg" />
							</div>
							<div class="project_img">
								<img src="img/007.jpg" />
							</div>
						</div>
						<div class="item_right">
							<h4 class="text-primary">使用原生JS实现</h4>
							<p>✿ 由于接触这个项目较晚，只完成了少部分的项目，还在努力学习ing~~</p>
							<p>✿ 排序算法的应用</p>
							<p>✿DOM节点的插入删除应用</p>
							<p>✿ 音乐播放器</p>
							<p>✿ 表单验证</p>

						</div>

					</div>
					<div class="slide">

						<h3 class="title1 text-center">
						<a href="http://github-26713243.oschina.io/librae33.github.io" title="在线预览"><img src="img/030.png" class="source"></a>
					<a href="https://github.com/Librae33/Librae33.github.io" title="源代码"><img src="img/031.png" class="source"></a>个人简历<img src="img/heart-17.png" class="icon"/></h3>
						<div class="item_left">
							<div class="project_img">
								<img src="img/022.jpg" />
							</div>
							<div class="project_img">
								<img src="img/025.jpg" />
							</div>
							<div class="project_img">
								<img src="img/026.jpg" />
							</div>
							<div class="project_img">
								<img src="img/027.jpg" />
							</div>
						</div>
						<div class="item_right">
							<h4 class="text-primary">使用fullpage.js插件，animate.css和bootstrap实现</h4>
							<p>✿ 实现的个人网页版简历</p>
							<p>✿动画的切换</p>
							<p>✿ 上下滚屏</p>

						</div>

					</div>

				</div>
			</div>

			<!--第五屏 contact 联系我-->
			<div class="section section5">
				<div class="contact">
					<h1 class="text-center title1">联系我吧</h1>
					<h3 class="text-center ">870208273@qq.com</h3>
					<h3 class="text-center text-danger">15734087820</h3>
					<h3 class="text-center">快快把我收到碗里来吧~</h3>
					<div class="logo">
						<div class="img_wrap">
							<a href="https://github.com/Librae33"><img src="img/github.png"></a>
						</div>
						<div class="img_wrap">
							<a href="#"><img src="img/sina.png" /></a>
						</div>
						<div class="img_wrap">
							<a href="#"><img src="img/zhihu.png" /></a>
						</div>
						<div class="img_wrap">
							<a href="#"><img src="img/instagram.png" />
								<a href="#"></a>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
		<script type="text/javascript" src="js/main.js" ></script>
	</body>

</html>